import React, {useEffect, useState} from 'react';
import ProjectHeader from "./ProjectHeader";
import ProjectCard from "./ProjectCard";
import './index.css'

const ProjectPage = () => {
    const [dataList, setDataList] = useState([]);
    const corpId = window.localStorage.getItem("icip-dingtalk-corpId");
    useEffect(() => {
        searchProject();
    }, [corpId])

    const searchProject = () => {
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        const raw = JSON.stringify({
            "data": JSON.stringify({
                "currentPage": 1,
                "pageSize": 10
            })
        });

        const requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        fetch(`${window.appConfig.servicePath}/project/searchProject?corpId=${corpId}`, requestOptions)
            .then(response => response.json().then(result => {
                const newDataList = result.dataList || []
                setDataList(newDataList);
            }))
            .catch(error => console.log('error', error));
    }

    return (
        <>
            <ProjectHeader searchProject={()=>searchProject()}/>
            <br/>
            <div className="projectPage_ProjectHeader_box_cardList">
                {
                    dataList.map((item, index) => {
                        return <ProjectCard
                            key={item.id}
                            projectId={item.id}
                            projectName={item.projectName}
                            projectDescription={item.projectDescription}
                            icon={item.icon}
                        />
                    })
                }
            </div>
        </>
    );
};

export default ProjectPage;